{% extends 'base_exam.html' %}

{% block title %}Exam — {{ program.title }}{% endblock %}

{% block exam_header_meta %}
  {% if is_practice %}Practice · timer not started{% else %}{{ program.title }} · secure session{% endif %}
{% endblock %}

{% block extra_css %}
<style>
  .exam-q {
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    padding: 1.25rem 1.35rem;
    background: #fff;
    min-height: 12rem;
  }
  .exam-q.d-none { display: none !important; }
  .exam-choice-row {
    border: 1px solid #e2e8f0;
    border-radius: .75rem;
    padding: .65rem .9rem;
    margin-bottom: .5rem;
    cursor: pointer;
    transition: border-color .15s, background .15s;
  }
  .exam-choice-row:hover { border-color: #94a3b8; background: #f8fafc; }
  .exam-choice-row:has(input:checked) {
    border-color: #0d6efd;
    background: #eff6ff;
  }
  .exam-timer-bar {
    position: sticky; top: 0; z-index: 40;
    background: #0f172a; color: #fff;
    padding: .75rem 1rem; border-radius: .75rem;
    margin-bottom: 1rem;
    display: flex; flex-wrap: wrap; gap: .75rem 1.5rem;
    align-items: center; justify-content: space-between;
  }
  .exam-timer-bar.warn { background: #b45309; }
  .exam-timer-bar.danger { background: #be123c; animation: pulse 1s ease infinite; }
  @keyframes pulse { 50% { opacity: .85; } }
  #exam-timer {
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem; font-weight: 700; letter-spacing: .04em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  .practice-banner {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
    color: #fff;
    border-radius: 1rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
  }
  .lockdown-note {
    border-left: 4px solid #be123c;
    background: #fff1f2;
    border-radius: .5rem;
    padding: .75rem 1rem;
    font-size: .875rem;
  }
</style>
{% endblock %}

{% block content %}
{% if is_practice %}
<div class="practice-banner">
  <div class="fw-bold mb-1"><i class="bi bi-lightbulb me-1"></i>Practice question</div>
  <div class="small opacity-90 mb-0">
    Not scored. Select an option, then start the real exam — it will enter <strong>full screen</strong>
    and the timer begins. Leaving the screen or exiting full screen cancels the attempt.
  </div>
</div>

<div class="exam-q" id="practice-q">
  <div class="text-muted small mb-2">Sample · not counted</div>
  <div class="fw-semibold mb-3">
    Which option best describes a multiple-choice question in this exam?
  </div>
  <div class="exam-choice-row">
    <div class="form-check mb-0">
      <input class="form-check-input" type="radio" name="practice_q" id="pq1" value="1">
      <label class="form-check-label" for="pq1">Select one answer, then move to the next question</label>
    </div>
  </div>
  <div class="exam-choice-row">
    <div class="form-check mb-0">
      <input class="form-check-input" type="radio" name="practice_q" id="pq2" value="2">
      <label class="form-check-label" for="pq2">You can skip questions and return later freely</label>
    </div>
  </div>
  <div class="exam-choice-row">
    <div class="form-check mb-0">
      <input class="form-check-input" type="radio" name="practice_q" id="pq3" value="3">
      <label class="form-check-label" for="pq3">All questions appear on one long page</label>
    </div>
  </div>
  <div class="exam-choice-row">
    <div class="form-check mb-0">
      <input class="form-check-input" type="radio" name="practice_q" id="pq4" value="4">
      <label class="form-check-label" for="pq4">You may open other browser tabs during the test</label>
    </div>
  </div>
</div>

<div class="lockdown-note mt-3 mb-3">
  <strong>Important:</strong> The real exam runs in this secure window in full screen.
  Switching tabs, leaving the window, or exiting full screen will <strong>cancel</strong> this attempt.
  Results appear about {{ program.results_delay_minutes|default:5 }} minutes after you submit.
</div>

<form method="post" action="{% url 'certifications:begin_timed_exam' attempt.pk %}" id="begin-form">
  {% csrf_token %}
  <button type="submit" class="btn btn-success btn-lg w-100 fw-semibold" id="begin-btn" disabled>
    Start real exam (full screen + timer)
  </button>
</form>

{% else %}
<div class="exam-timer-bar" id="timer-bar">
  <div>
    <div class="small opacity-75">Time remaining · {{ time_limit_minutes }} min total</div>
    <div id="exam-timer"
         data-seconds="{{ seconds_remaining }}"
         data-deadline="{{ deadline_iso }}">--:--</div>
  </div>
  <div class="small text-end">
    <div>Question <strong id="q-pos">1</strong> / {{ questions|length }}</div>
    <div class="opacity-75">Answered: <strong id="answered-count">0</strong></div>
  </div>
</div>

<div class="lockdown-note mb-3">
  <i class="bi bi-exclamation-triangle-fill text-danger me-1"></i>
  Stay in this full-screen session. Leaving the screen, switching tabs, or exiting full screen cancels the exam.
</div>

<form method="post" id="exam-form"
      action="{% url 'certifications:take_exam' attempt.pk %}"
      data-cancel-url="{% url 'certifications:cancel_exam' attempt.pk %}"
      data-result-url="{% url 'certifications:exam_result' attempt.pk %}">
  {% csrf_token %}
  {% for q in questions %}
  <div class="exam-q{% if not forloop.first %} d-none{% endif %}" data-q-index="{{ forloop.counter0 }}" id="q{{ q.pk }}">
    <div class="fw-semibold mb-3">{{ forloop.counter }}. {{ q.text }}</div>
    {% for c in q.choices.all %}
    <div class="exam-choice-row">
      <div class="form-check mb-0">
        <input class="form-check-input exam-choice" type="radio"
               name="q_{{ q.pk }}" id="c{{ c.pk }}" value="{{ c.pk }}">
        <label class="form-check-label" for="c{{ c.pk }}">{{ c.text }}</label>
      </div>
    </div>
    {% endfor %}
  </div>
  {% endfor %}

  <div class="d-flex gap-2 mt-3">
    <button type="button" class="btn btn-primary flex-grow-1 fw-semibold" id="next-btn" disabled>
      Next question
    </button>
    <button type="submit" class="btn btn-success flex-grow-1 fw-semibold d-none" id="submit-btn" disabled>
      Submit exam
    </button>
  </div>
  <p class="text-muted small mt-2 mb-0" id="select-hint">Select an option to continue.</p>
</form>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
(function () {
  {% if is_practice %}
  var beginBtn = document.getElementById('begin-btn');
  var beginForm = document.getElementById('begin-form');
  document.querySelectorAll('input[name="practice_q"]').forEach(function (r) {
    r.addEventListener('change', function () {
      beginBtn.disabled = false;
    });
  });
  beginForm.addEventListener('submit', function (e) {
    // Enter fullscreen before navigation when possible (user gesture)
    var root = document.documentElement;
    var req = root.requestFullscreen || root.webkitRequestFullscreen || root.msRequestFullscreen;
    if (req) {
      try { req.call(root); } catch (err) {}
    }
    beginBtn.disabled = true;
    beginBtn.textContent = 'Starting…';
  });
  return;
  {% endif %}

  var form = document.getElementById('exam-form');
  var el = document.getElementById('exam-timer');
  var bar = document.getElementById('timer-bar');
  if (!form || !el) return;

  var panels = Array.prototype.slice.call(document.querySelectorAll('.exam-q[data-q-index]'));
  var nextBtn = document.getElementById('next-btn');
  var submitBtn = document.getElementById('submit-btn');
  var qPos = document.getElementById('q-pos');
  var hint = document.getElementById('select-hint');
  var index = 0;
  var submitted = false;
  var cancelling = false;
  var examActive = true;
  var lockdownArmed = false;

  var seconds = parseInt(el.dataset.seconds, 10);
  if (isNaN(seconds) || seconds < 0) {
    var end = new Date(el.dataset.deadline).getTime();
    seconds = Math.max(0, Math.floor((end - Date.now()) / 1000));
  }

  function isFullscreen() {
    return !!(document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement);
  }

  function enterFullscreen() {
    var root = document.documentElement;
    var req = root.requestFullscreen || root.webkitRequestFullscreen || root.msRequestFullscreen;
    if (!req) {
      lockdownArmed = true;
      return;
    }
    try {
      var p = req.call(root);
      if (p && typeof p.then === 'function') {
        p.then(function () {
          setTimeout(function () { lockdownArmed = true; }, 1000);
        }).catch(function () {
          lockdownArmed = true;
        });
      } else {
        setTimeout(function () { lockdownArmed = true; }, 1000);
      }
    } catch (e) {
      lockdownArmed = true;
    }
  }

  function exitFullscreenQuiet() {
    var ex = document.exitFullscreen || document.webkitExitFullscreen || document.msExitFullscreen;
    if (ex && isFullscreen()) {
      try { ex.call(document); } catch (e) {}
    }
  }

  function currentPanel() {
    return panels[index];
  }

  function panelAnswered(panel) {
    return !!(panel && panel.querySelector('.exam-choice:checked'));
  }

  function updateAnswered() {
    var names = {};
    document.querySelectorAll('.exam-choice:checked').forEach(function (r) {
      names[r.name] = true;
    });
    var countEl = document.getElementById('answered-count');
    if (countEl) countEl.textContent = Object.keys(names).length;
  }

  function updateNav() {
    var last = index >= panels.length - 1;
    var answered = panelAnswered(currentPanel());
    nextBtn.classList.toggle('d-none', last);
    submitBtn.classList.toggle('d-none', !last);
    nextBtn.disabled = !answered;
    submitBtn.disabled = !answered;
    if (qPos) qPos.textContent = String(index + 1);
    if (hint) {
      hint.textContent = answered
        ? (last ? 'Last question — submit when ready.' : 'Option selected — you can go next.')
        : 'Select an option to continue.';
    }
    updateAnswered();
  }

  function showIndex(i) {
    panels.forEach(function (p, n) {
      p.classList.toggle('d-none', n !== i);
    });
    index = i;
    updateNav();
  }

  panels.forEach(function (panel) {
    panel.querySelectorAll('.exam-choice').forEach(function (r) {
      r.addEventListener('change', updateNav);
    });
    panel.querySelectorAll('.exam-choice-row').forEach(function (row) {
      row.addEventListener('click', function (e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'LABEL') return;
        var input = row.querySelector('input.exam-choice');
        if (input) {
          input.checked = true;
          input.dispatchEvent(new Event('change', { bubbles: true }));
        }
      });
    });
  });

  nextBtn.addEventListener('click', function () {
    if (!panelAnswered(currentPanel())) return;
    if (index < panels.length - 1) showIndex(index + 1);
  });

  form.addEventListener('submit', function () {
    submitted = true;
    examActive = false;
    lockdownArmed = false;
    submitBtn.disabled = true;
    nextBtn.disabled = true;
    exitFullscreenQuiet();
  });

  function cancelExam(reason, useBeacon) {
    if (!examActive || submitted || cancelling) return;
    cancelling = true;
    submitted = true;
    examActive = false;
    lockdownArmed = false;
    var cancelUrl = form.dataset.cancelUrl;
    if (useBeacon) {
      try {
        var fd = new FormData(form);
        fd.append('reason', reason || 'browser_leave');
        if (navigator.sendBeacon) {
          navigator.sendBeacon(cancelUrl, fd);
        } else {
          fetch(cancelUrl, {
            method: 'POST',
            body: fd,
            credentials: 'same-origin',
            keepalive: true
          });
        }
      } catch (e) {}
      return;
    }
    var reasonInput = document.createElement('input');
    reasonInput.type = 'hidden';
    reasonInput.name = 'reason';
    reasonInput.value = reason || 'tab_leave';
    form.appendChild(reasonInput);
    form.action = cancelUrl;
    form.submit();
  }

  document.addEventListener('visibilitychange', function () {
    if (document.hidden && lockdownArmed) cancelExam('tab_leave', false);
  });

  window.addEventListener('pagehide', function () {
    if (lockdownArmed) cancelExam('browser_leave', true);
  });

  window.addEventListener('beforeunload', function (e) {
    if (!examActive || submitted) return;
    e.preventDefault();
    e.returnValue = '';
  });

  function onFsChange() {
    if (!lockdownArmed || submitted || cancelling) return;
    if (!isFullscreen()) {
      cancelExam('fullscreen_exit', false);
    }
  }
  document.addEventListener('fullscreenchange', onFsChange);
  document.addEventListener('webkitfullscreenchange', onFsChange);

  function renderTimer() {
    var m = Math.floor(seconds / 60);
    var s = seconds % 60;
    el.textContent = String(m).padStart(2, '0') + ':' + String(s).padStart(2, '0');
    bar.classList.remove('warn', 'danger');
    if (seconds <= 5 * 60) bar.classList.add('danger');
    else if (seconds <= 10 * 60) bar.classList.add('warn');
  }

  function tick() {
    renderTimer();
    if (seconds <= 0) {
      if (!submitted) {
        submitted = true;
        examActive = false;
        lockdownArmed = false;
        submitBtn.disabled = true;
        exitFullscreenQuiet();
        form.submit();
      }
      return;
    }
    seconds -= 1;
    setTimeout(tick, 1000);
  }

  enterFullscreen();
  showIndex(0);
  tick();
})();
</script>
{% endblock %}